<template>
  <div class="header">
    <div class="left" @click="changeIsCollapse">
      <el-icon v-show="!isCollapse" class="icon"><Fold /></el-icon>
      <el-icon v-show="isCollapse" class="icon"><Expand /></el-icon>
    </div>
    <div class="right">
      <el-popover
        placement="bottom"
        :width="320"
        trigger="click"
        popper-class="popper-user-box"
      >
        <template #reference>
          <div class="author">
            <el-icon><Avatar /></el-icon>
            <span>{{ users.username || "张三" }}</span>
          </div>
        </template>
        <div class="nickname">
          <p>登录名：{{ users.username || "张三" }}</p>
          <p>昵称：{{ users.nickname || "" }}</p>
          <el-tag size="small" effect="dark" class="logout" @click="logout"
            >退出</el-tag
          >
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script setup>
import { onMounted, computed, ref, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { useUsersStore } from "../store";
import { localRemove } from "../../utils";

const users = useUsersStore();

// import axios from '@/utils/axios'
// import { localRemove, pathMap } from "@/utils";
// 定义左侧栏收缩
let isCollapse = ref(false);
const router = useRouter();
const state = reactive({
  userInfo: null,
  hasBack: false,
});
// 使用toRefs把reactive的数据暴露出去
let { userInfo, hasBack } = toRefs(state);

onMounted(() => {
  // console.log("Header", users);
  // console.log("Header", users.username);
});

const getUsers = computed(() => {
  return users.getUsers;
});

// console.log("Header Computed===>", getUsers.value);

const logout = () => {
  // 清除用户名称的缓存
  localRemove("username");
  // 跳转到登录页
  router.push("/");
};

// onMounted(() => {
//   const pathname = window.location.hash.split("/")[1] || "";
//   if (!["login"].includes(pathname)) {
//     getUserInfo();
//   }
// });
// const getUserInfo = async () => {
//   const userInfo = await axios.get("/adminUser/profile");
//   state.userInfo = userInfo;
// };

// 子传父
const emits = defineEmits(["changeIsCollapse"]);

const changeIsCollapse = () => {
  isCollapse.value = !isCollapse.value;
  emits("changeIsCollapse", isCollapse.value);
};
// router.afterEach((to) => {
//   console.log("to", to);
//   const { id } = to.query;
//   state.name = pathMap[to.name];
//   if (id && to.name == "add") {
//     state.name = "编辑商品";
//   }
//   state.hasBack = ["level2", "level3", "order_detail"].includes(to.name);
// });
// return {
//   ...toRefs(state),
//   logout,
//   back,
// };
</script>

<style scoped>
.header {
  height: 50px;
  border-bottom: 1px solid #e9e9e9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.el-icon-back {
  border: 1px solid #e9e9e9;
  padding: 4px;
  border-radius: 50px;
  margin-right: 10px;
}
.left .icon {
  font-size: 24px;
  cursor: pointer;
}
.left:hover .icon {
  color: #409eff;
}
.right > div > .icon {
  font-size: 18px;
  margin-right: 6px;
}
.author {
  margin-left: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.author > span {
  margin-left: 10px;
}
</style>
<style>
.popper-user-box {
  background: url("https://s.yezgea02.com/lingling-h5/static/account-banner-bg.png")
    50% 50% no-repeat !important;
  background-size: cover !important;
  border-radius: 0 !important;
}
.popper-user-box .nickname {
  position: relative;
  color: #ffffff;
}
.popper-user-box .nickname .logout {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}
</style>
